<template>
	<view class="pay_type">
		<view class="header">
			<text>选择支付方式</text>
			<!-- <image :src="`${baseImageUrl}/common/close1.png`" @click="$emit('close')"></image> -->
		</view>
		<view class="close" @click="$emit('close')">
			<image :src="`${baseImageUrl}/common/close1.png`"></image>
		</view>
		<scroll-view scroll-y class="scroll_view">
			<view class="item" v-for="(item,index) in list" :class="[active==index?'active':'']"
				@click="changeActive(index)">
				<view class="left">{{item}}</view>
				<view class="right">
					<image :src="`${baseImageUrl}/common/checked.png`" v-if="active==index"></image>
					<image :src="`${baseImageUrl}/common/check_no.png`" v-else></image>
				</view>
			</view>
		</scroll-view>
		<!-- <view class="password">
			<text>支付密码</text>
			<input type="text" password placeholder="请输入支付密码" v-model="pay_password">
		</view> -->
		<view class="btn">
			<view @click="submit">支付</view>
		</view>
	</view>
</template>

<script>
	import {
		shopOrderPayment
	} from '@/request/api.js';
	export default {
		props: {
			list: {
				type: Object,
				default: () => {}
			},
			id: {
				type: [String, Number],
				default: ''
			}
		},
		data() {
			return {
				active: "",
				pay_password: ""
			}
		},
		created() {
			let keys = Object.keys(this.list);
			this.active = keys.length ? keys[0] : 1;
		},
		methods: {
			changeActive(value) {
				this.active = value;
				this.pay_password = "";
			},
			async submit() {
				let pay_mode = this.active;
				let {
					pay_data
				} = await shopOrderPayment({
					id: this.id,
					pay_mode: pay_mode
				});
				if (pay_mode == 1) {
					this.$u.toast("订单支付成功");
					setTimeout(() => {
						this.$emit('success');
					}, 1000);
				}
				if (pay_mode == 2) {
					let res = JSON.parse(pay_data);
					let url = res.redirect_url;
					this.$store.commit('changeUrl', url);
					uni.navigateTo({
						url: '/pages/common/web'
					});
				}
				if (pay_mode == 3) {
					this.$store.commit('changeUrl', pay_data);
					uni.navigateTo({
						url: '/pages/common/web'
					});
				}
				if (pay_mode == 4) {
					this.$store.commit('changeUrl', pay_data);
					uni.navigateTo({
						url: '/pages/common/web'
					});
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.pay_type {
		height: 606rpx;
		padding: 0rpx 20rpx 20rpx;
		box-sizing: border-box;
		background: url(#{$baseImageUrl}/bg/688_606.png) no-repeat;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		position: relative;

		.close {
			width: 122rpx;
			height: 122rpx;
			position: absolute;
			right: 0rpx;
			top: 0rpx;
			transform: translate(30rpx, -50rpx);
			z-index: 2;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.header {
			height: 88rpx;
			color: #373737;
			font-size: 28rpx;
			font-weight: 600;
			border-radius: 20rpx 20rpx 0px 0px;
			padding: 0 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.scroll_view {
			height: calc(100% - 162rpx);

			.item {
				height: 88rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					color: #373737;
					font-size: 28rpx;
					font-weight: 400;
				}

				.right {
					image {
						width: 48rpx;
						height: 48rpx;
					}
				}
			}
		}

		.password {
			height: 120rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			text {
				font-size: 28rpx;
				font-weight: 400;
				margin-right: 30rpx;
			}

			input {
				flex: 1;
				height: 80rpx;
				font-size: 28rpx;
				font-weight: 400;
				border-radius: 10rpx;
				padding-left: 30rpx;
				box-sizing: border-box;
				background: #C0B5B6;
				box-shadow: 2rpx -1px 10rpx 0px rgba(3, 0, 0, 0.2);
			}
		}

		.btn {
			width: 100%;
			display: flex;
			justify-content: center;

			view {
				width: 204rpx;
				height: 74rpx;
				line-height: 74rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: 30rpx;
				font-weight: 400;
				font-family: SimSun;
				background: url(#{$baseImageUrl}/common/btn.png) no-repeat;
				background-size: 100% 100%;
			}
		}
	}
</style>